<!-- Dom模板 -->
<template>
  <div class="Alert">
    <!-- Dom内容 -->
    <div @click="close" class="top">
      <p class="el-icon-arrow-left"></p>
      <p>返回</p>
    </div>
    <div class="cont">
      <ul>
        <li>*姓名：</li>
        <li>*手机号：</li>
        <li>*密码：</li>
        <li>*权限：</li>
      </ul>
      <ul>
        <li><input type="text" placeholder="请输入姓名" v-model="name" /></li>
        <li><input type="text" placeholder="请输入手机号" v-model="user" /></li>
        <li><input type="text" placeholder="请输入手密码" v-model="pass" /></li>
        <li>
          <select v-model="state">
            <option>店员</option>
            <option>管理员</option>
          </select>
        </li>
      </ul>
    </div>
    <button @click="edit">确定</button>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  props: ["editFlag"],
  data() {
    return {
      msg: "测试",
      name: this.$store.state.role.Edit.name,
      user: this.$store.state.role.Edit.user,
      pass: this.$store.state.role.Edit.pass,
      state: this.$store.state.role.Edit.state === "1" ? "管理员" : "店员",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    close() {
      this.$emit("close1", !this.editFlag);
    },
    edit() {
      this.$store.commit("role/editOk", {
        name: this.name,
        user: this.user,
        pass: this.pass,
        state: this.state,
        ifID: this.$store.state.role.Edit.ifID,
      });
      location.reload();
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  list-style: none;
}
.Alert {
  width: 100%;
  height: calc(100vh - 100px);
  position: absolute;
  top: 0;
  left: 0%;
  background-color: #eef1f5;
  padding-left: 50px;
  padding-top: 30px;
  animation: A 0.3s linear 1;
  animation-fill-mode: forwards;
  transform: translate(1300px, 0);
}
.el-icon-arrow-left {
  font-size: 20px;
  margin-right: 5px;
  margin-top: 1px;
}
.top {
  display: flex;
  align-items: center;
}
.cont {
  display: flex;
  margin-top: 30px;
}
.cont ul li {
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
}
.cont ul li input {
  width: 230px;
  height: 30px;
  border: none;
  outline: none;
  padding-left: 10px;
}
.cont ul li select {
  height: 30px;
  border: none;
  outline: none;
  padding-left: 10px;
}
button {
  width: 70px;
  height: 30px;
  background-color: #3ca1ff;
  color: white;
  border: none;
  border-radius: 10px;
  margin-top: 30px;
  margin-left: 55px;
}
button:disabled {
  background-color: gray;
  color: gainsboro;
}
@keyframes A {
  0% {
    transform: translate(1300px, 0);
  }
  50% {
    transform: translate(650px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>